<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav v-if="isAuthenticated">
      <router-link to="/users">用户列表</router-link> |
      <router-link to="/users/create">创建用户</router-link> |
      <button @click="handleLogout">退出登录</button>
    </nav>

    <!-- 路由视图 -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from './stores/auth'

const authStore = useAuthStore()
const router = useRouter()

// 检查用户是否已登录
const isAuthenticated = computed(() => !!authStore.token)

// 退出登录
const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}

// 页面加载时检查登录状态
onMounted(() => {
  if (!isAuthenticated.value && router.currentRoute.value.path !== '/login') {
    router.push('/login')
  }
})
</script>

<style>
@import './styles/global.css';
</style>
